<template>
  <div class="designer-wrap">
    <!-- <FlowNav v-if="navable && !readable" :currentNav="1" :buttonName="buttonName" @click="publish" @change="change" /> -->
    <div class="designer-base-info">
      <div class="base-info-panel">
        <el-form>
          <el-form-item label="图标">
            <el-upload
              class="avatar-uploader"
              action="/upload/img"
              :http-request="picUpload"
              :show-file-list="false"
              :on-success="onSuccess"
              :on-error="onError"
            >
              <img
                v-if="baseSetting.imageUrl"
                :src="baseSetting.imageUrl"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item label="名称">
            <el-input
              v-model="baseSetting.flowName"
              placeholder="请输入名称"
              :size="size"
            />
          </el-form-item>

          <el-form-item label="分组">
            <FlowSimpleSelect
              v-model="baseSetting.flowGroup"
              :datas="flowGroups"
              labelName="label"
              placeholder="请选择分组"
            />
          </el-form-item>

          <el-form-item label="说明">
            <el-input
              v-model="baseSetting.description"
              type="textarea"
              :size="size"
              :rows="4"
              placeholder="说明"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup name="BasicInfo">
import { ref, reactive, toRefs,  computed } from "vue";
import { useStore } from "vuex";
import { flowMixin } from "../../mixins/flowMixin";
import FlowSelect from "../../Component/FlowSelect.vue";
import FlowSimpleSelect from "../../Component/FlowSimpleSelect.vue";
import { uploadImg } from "../../../api/common.js";

const buttonName = ref("保存");
const formLayout = ref("vertical");
const flowName = ref("");
const bindForm = ref([]);
const flowGroups = reactive([
  { label: "人事", value: "1" },
  { label: "考勤", value: "2" },
  { label: "行政", value: "3" },
  { label: "财务", value: "4" },
  { label: "薪酬", value: "5" },
  { label: "资产", value: "6" },
]);

const forms = reactive([
  { label: "请假表单", value: "人事表单" },
  { label: "加班表单", value: "考勤表单" },
  { label: "调休表单", value: "调休表单" },
  { label: "补卡表单", value: "补卡表单" },
  { label: "出差表单", value: "出差表单" },
  { label: "销假表单", value: "销假表单" },
]);
const store = useStore();
const emit = defineEmits(["publish"]);
const props = defineProps({
  navable: {
    type: Boolean,
    default: true,
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

const { navable, readable } = toRefs(props);

const onPublish = () => {
  emit("publish", flowName.value);
};

const baseSetting = computed(() => {
  return store.state.process.baseSetting;
});
const onSuccess = (response) => {
  console.log("response");
  // 处理后端返回的响应数据
};
const onError = (error) => {
  console.log("error");
  // 处理上传失败的逻辑
};

const picUpload = (f) => {
  console.log(f);
  const formData = new FormData();
  formData.append("file", f.file);
  uploadImg({file: f.file}).then((res) => {
    console.log(res);
    store.state.process.baseSetting.imageUrl = res.data;
  });
};
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}
</style>
